<template>
	<view class="register-depart">
		<Search :real='true' placeholder='请输入科室或医生名称进行搜索' @search='onSearch'/>
		<RegisterListHeader />
		<view class="register-depart-main">
			<u-tabs v-if="tabLists.length>1" :list="tabLists" :is-scroll="false" :current="currentTab" @change="change" :active-color='themeColorLight'>
			</u-tabs>
			<view class="register-depart-main-warp" :class="tabLists.length>1?'mult':'list'">
				<!-- <text>{{ name }}</text> -->
				<template v-if="name">
					<view class="register-depart-main-list">
						<u-cell-group>
							<view class="title" v-if="departData.length">
								<u-section title="科室" font-size='32' :right="false" :bold='true' :line-color='themeColorDark' color="#000000"></u-section>
							</view>
							<u-cell-item border-top v-for="(item, i) in departData" :title="item.deptName" :key='i+"depart"' @click="toPage(item.deptCode,'deptCode')"></u-cell-item>
							<view class="title" v-if="doctorData.length">
								<u-section title="医生" font-size='32' :right="false" :bold='true' :line-color='themeColorDark' color="#000000"></u-section>
							</view>
							<u-cell-item border-top v-for="(item, i) in doctorData" :value="item.deptName" :key='i+"doctor"'  @click="toPage(item.doctorCode,'doctorCode')">
								<view slot="title" class="">
									<text style="margin-right: 10rpx;">{{item.doctorName}}</text>
									<u-tag :text="item.titleName" mode="dark" bg-color='#DFE7FC' color='#555555' shape='square' />
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>
				</template>
				<template v-else>
						<List v-if="pageList" :data='departData' :code='tabLists[currentTab].code' />
						<Tree v-else :data='departData'/>
				</template>
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import RegisterListHeader from '../../components/RegisterListHeader'
	import Search from '../../components/Search/index.vue'
	import Load from '@/components/Load/index.vue'
	import Tree from '@/components/Tree/index.vue'
	import List from '@/components/Tree/list.vue'
	import { getHospital, getDepartList } from '@/api/register.js'
	import { themeColorDark, themeColorLight } from '@/static/js/theme.js'
	import { getValue } from '@/common/js/common.js'
	import {isEmptyData} from '../../utils/assist.js'
	export default {
		components:{ RegisterListHeader, Search,  Load, Tree, List },
		data() {
			return {
				themeColorDark,themeColorLight,
				tabLists:[],
				currentTab:0,
				departData:[],
				doctorData:[],
				pageList:false,
				load:false,
				code:'',
				name:'',
				searchName:'',
			}
		},
		computed:{
			...mapGetters(['systemParams'])
		},
		created() {
      console.log('this.systemParams', this.systemParams)
			this.pageList = getValue('KSZSCODE',this.systemParams)==1?true:false
			this.getHospitalList()
		},
		methods: {
			change(val) {
				this.currentTab = val;
				this.code = this.tabLists[val].code;
				this.name = this.tabLists[val].name;
				this.getDepartList()
			},
			getHospitalList(){
				this.tabLists = []
				this.load = true;
				getHospital().then(data =>{
					data.forEach(item => {
						this.tabLists.push({
							// name:item.hospitalDistrictName,
							// code:item.hospitalDistrictCode,
              name:item.name,
              code:item.hospitalDistrictCode
						})
					})
					this.code = this.tabLists[0].code;
					this.name = this.tabLists[0].name;
					this.getDepartList()
				}).catch(e => {
					this.load = false
				})
			},
			getDepartList(){
				this.load = true;
				let that = this;
				const params = {
					hospitalDistrictCode:this.code,
					hospitalDistrictName:this.name,
					searchName:this.searchName,
				}
				getDepartList(params).then(data => {
					this.load = false
					this.departData = []
					this.doctorData = []
					if(this.name){
						data.forEach(item => {
							if(!isEmptyData(item.doctorCode)){
								that.doctorData.push(item)
							}else{
								that.departData.push(item)
							}
						})
					}else{
						this.departData = data || []
					}
				}).catch(e => {
					this.departData = []
					this.doctorData = []
					this.load = false
				})
			},
			onSearch(val){
				this.searchName = val
				this.getDepartList()
			},
			toPage(value, type){
				uni.navigateTo({
					url:`/pages/registerPblist/index?${type}=${value}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-depart-main{
		margin-top: 10rpx;
		background-color: $uni-bg-color;
		.mult{
			height: calc(100vh - 110rpx - 310rpx - 10rpx - 80rpx);
			overflow: scroll;
		}
		.list{
			height: calc(100vh - 110rpx - 310rpx - 10rpx);
			overflow: scroll;
		}
		.register-depart-main-list{
			.title{
				// font-weight: bold;
				padding: 10rpx 0;
			}
		}
	}
</style>
<style lang="scss">
	.register-depart-main .mult{
		.tree-left,.tree-right{
			height: calc(100vh - 110rpx - 310rpx - 10rpx - 80rpx);
			overflow: scroll;
		}
	}
	.register-depart-main .list {
		.tree-left,.tree-right{
			height: calc(100vh - 110rpx - 310rpx - 10rpx);
			overflow: scroll;
		}
	}
</style>
